<template>
  <div class="newdata">
    <div class="topbar">
      <p class="new">{{ showType }}资料</p>
      <span @click="closeClick" class="closeClick">
        <i class="el-icon-close" key="venNew1"></i>
      </span>
      <!-- <size-list class="size_list" :sizeKindId="sizeKindId"></size-list> -->
    </div>

    <!-- 新建 -->
    <div class="center_box" v-if="showType == '新建' || showType == '编辑'">
      <p class="new">厂商建档</p>
      <i class="el-icon-question" @click="OIclick" key="venNew2"></i>
      <div class="center_box1">
        <div class="center_box1c">
          <p class="contener">*</p>
          <p class="contener1">编号</p>
          <el-input
            :disabled="showType == '编辑'"
            v-model="no"
            ref="newdataFirstInp1"
            @blur="search"
          ></el-input>
        </div>
        <div class="center_box1c">
          <p class="contener">*</p>
          <p class="contener1">简称</p>
          <el-input v-model="name"></el-input>
        </div>
        <div class="center_box1c jl" style="margin-left: 36px">
          <p class="contener1">全称</p>
          <el-input v-model="nameAll"></el-input>
        </div>
        <div class="center_box1c jl">
          <p class="contener1">负责人员</p>
          <el-input v-model="principal"></el-input>
        </div>
      </div>

      <div class="center_box2">
        <div class="center_box1c jl jl4">
          <p class="contener1">币种</p>
          <!-- <select v-model="curencyType" class="select" autofocus:no >
           <option value="1"></option>
          </select> -->
          <el-select v-model="curencyType">
            <el-option
              v-for="item in curencyTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="center_box1c jl jl3">
          <p class="contener1">折数</p>
          <el-input v-model="discount"></el-input>
        </div>
        <div class="center_box1c jl jl2">
          <p class="contener1">电话</p>
          <el-input v-model="phone"></el-input>
        </div>
        <div class="center_box1c jl jl1">
          <p class="contener1">联系人员</p>
          <el-input v-model="contact"></el-input>
        </div>
      </div>

      <div class="center_box3">
        <div class="center_box1c jl jl4">
          <p class="contener1">传真</p>
          <el-input v-model="fax"></el-input>
        </div>
        <div class="center_box1c jl jl3">
          <p class="contener1">备注</p>
          <el-input v-model="remark"></el-input>
        </div>

        <div class="center_box1c jl jl1">
          <p class="contener1">地址</p>
          <!-- <input type="text" v-model="remark" style="outline:none;padding:0 15px;width:160px;height:29px;border:1px solid #DCDFE6;border-radius:3px"> -->
          <el-input
            v-model="address"
            style="width: 402px"
            @keyup.enter.native="preservation"
          ></el-input>
          <!-- <div class="center_box1c jl">
          <p class="contener1">品牌公司</p><el-input v-model="brandedCompany"></el-input>
        </div> -->
        </div>
      </div>
      <div class="new_barcode">
        <div class="barcode_item_1">
          <span class="contener1">条码规律</span>
          <el-select
            v-model="brandedCompany"
            placeholder="请选择"
            @change="handleSelect"
          >
            <el-option
              v-for="(item, _index) in companyList"
              :key="_index"
              :label="item.value"
              :value="_index"
            >
            </el-option>
          </el-select>
        </div>
        <div class="barcode_item_2">
          <span class="contener1">条码样式</span>
          <el-input v-model="reference" disabled></el-input>
        </div>
      </div>
      <el-button
        @click="preservation"
        class="button_1"
        type="primary"
        :disabled="showType == '详情'"
        >保存</el-button
      >
    </div>

    <!-- 详情 -->
    <div class="center_box" v-else>
      <div class="center_box">
        <p class="new">厂商建档</p>
        <i class="el-icon-question" @click="OIclick" key="venNew2"></i>
      </div>
      <div class="new_center">
        <div class="list_cenent">
          <span class="hint">*</span>
          <span
            >编号
            <span class="info">{{ no || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span class="hint">*</span>
          <span
            >厂商简称
            <span class="info">{{ name || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span
            >厂商全称
            <span class="info">{{ nameAll || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span
            >负责人员
            <span class="info">{{ principal || '-' }}</span>
          </span>
        </div>
      </div>
      <div class="new_center">
        <div class="list_cenent">
          <span
            >币种
            <span class="info">{{ curencyType || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span
            >折数
            <span class="info">{{ discount || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span
            >电话
            <span class="info">{{ phone || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span
            >联系人员
            <span class="info">{{ contact || '-' }}</span>
          </span>
        </div>
      </div>
      <div class="new_center">
        <div class="list_cenent">
          <span
            >传真
            <span class="info">{{ fax || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span
            >备注
            <span class="info">{{ remark || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span
            >地址
            <span class="info">{{ address || '-' }}</span>
          </span>
        </div>
        <div class="list_cenent">
          <span>
            <span class="info"></span>
          </span>
        </div>
      </div>
    </div>
    <!-- 下部框 -->
    <!-- <div class="foot">
      条码建档
      <div class="foot_1">
        <p class="new">条码建档(品牌公司)</p>
        <i class="el-icon-question" @click="OIclick" key="venNew3"></i>
        <div class="foot_input">
          <p class="contener2">条码规律(品牌公司)</p>
          <select v-model="company" class="select"><option value="85754545">12</option></select>

          <select v-model="company" class="select">
            <option value="85754545">12</option>
          </select>


          <el-autocomplete
            clearable
            class="inline-input"
            v-model="brandedCompany"
            :fetch-suggestions="querySearch"
            @select="handleSelect"
            ref="newdataFirstInp2"
          >
            <i class="el-input__icon" slot="suffix" key="venNew4"></i>
          </el-autocomplete>

          <i class="el-icon-question jl5" @click="OIclick" key="venNew5"></i>
          <p class="contener3">尺码种类</p>
          <el-select v-model="sizeKindId">
            <el-option
              v-for="item in sizeKindIdList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <i class="el-icon-question jl5" @click="OIclick" key="venNew6"></i>
        </div>
      </div>
      条码位数
      <div class="foot_1">
        <p class="new">条码位数</p>
        <i class="el-icon-question" @click="OIclick" key="venNew7"></i>
        <div class="foot_input">
          <p class="contener2">款号</p>
          <input class="sl" type="text" v-model="styleNumber" />
          <p class="contener4">色号/尺码</p>
          <input class="sl" type="text" v-model="colorNumber" />
          <p class="contener4">验证码</p>
          <input class="sl" type="text" v-model="code" />
          <p class="contener4">拆分</p>
          <input class="sl" type="text" v-model="splitNumber" />
        </div>
      </div>
      分隔开关
      <div class="foot_3">
        <p class="new">分隔开关</p>
        <i class="el-icon-question" @click="OIclick" key="venNew8"></i>
        <div class="foot_contener1">

          <p class="contener5">款号与颜色之间是否有"——"</p>
          款号 改为款号
          款号 改为款号
          <p class="contener5">款号与颜色之间是否有"——"</p>

          <el-switch v-model="styleColor" active-color="#017aff"></el-switch>
          <p class="contener6">是否为款号、尺码、颜色</p>
          <el-switch
            v-model="styleColorSize"
            active-color="#017aff"
          ></el-switch>
        </div>

        <div class="foot_contener1">
          <p class="contener5">色号与尺码之间是否有"——"</p>
          <el-switch v-model="colorSize" active-color="#017aff"></el-switch>
          <p class="contener7">条码与货号是否一致</p>
          <el-switch
            v-model="barCodeArticleNumberEqual"
            active-color="#017aff"
          ></el-switch>
        </div>

        <div class="foot_contener1">
          <p class="contener5">末尾为售价 售价隔开符</p>
          <input class="last_input" v-model="partitionPrice" type="text" />
        </div>
      </div>

      底部说明
      <div class="explain">
        <i class="el-icon-question" @click="OIclick"></i>
        <p>说明：</p>
        <p
          style="display: inline; color: #017aff; cursor: pointer"
          @click="OIclick"
        >
          条码与货号的区别，与操作说明
        </p>
      </div>

      <el-button @click="dele" class="f_button" :disabled="showType == '详情'"
        >删除</el-button
      >
      <el-button
        @click="preservation1"
        class="f_button1"
        type="primary"
        :disabled="showType == '详情'"
        >保存</el-button
      >

    </div>
    </div>  -->
    <!-- 操作说明图片 -->
    <OIimg :style="{ display: showOI }" @closeOI="closeOI"></OIimg>
  </div>
</template>

<script>
import sizeList from './SizeList'
import OIimg from './OIimg'
import {
  postManufacturer,
  postBarCode,
  putManufacturer,
  getBarCode,
  deleteBarCode,
  getManufacturer
} from '../../../../network/manufacturer'
import { getSizeType } from '../../../../network/size'
import { postBranded } from '../../../../network/branded'
import CostDocVue from '../../CostDoc/CostDoc.vue'

import enterUp from '../../../../components/mixins/enterUp'

export default {
  mixins: [enterUp],
  props: {
    detailInfo: {
      type: Object,
      default: {}
    },
    showType: {
      type: String,
      default: ''
    }
  },
  created() {
    // 获取所有尺码种类
    getSizeType().then((res) => {
      let list = res.data.data
      // console.log(res)
      list.forEach((element) => {
        this.sizeKindIdList.push({ label: element, value: element })
      })
    })

    // 获取所有存在的品牌公司名称
    getBarCode().then((res) => {
      this.AllList = res.data.data
      this.AllList.forEach((element) => {
        this.companyList.push({ value: element.company, _id: element.id })
        // console.log(this.companyList.value)
        // this._id = element.id //拿到id进行条码规律删除
        // console.log(this.companyList, 'companyList')
        // console.log(this._id)
      })
    })
  },
  data() {
    return {
      _id: '',
      AllList: [],
      idList: [],
      company: '',
      companyList: [],
      partitionPrice: '/',
      address: '',
      no: '',
      brandedCompany: '',
      sizeKindId: '',
      sizeKindIdList: [],
      name: '',
      contact: '',
      discount: 10,
      phone: '',
      fax: '',
      nameAll: '',
      remark: '',
      curencyType: '￥',
      curencyTypeList: [
        {
          label: '￥',
          value: '￥'
        },
        {
          label: '$',
          value: '$'
        }
      ],
      styleNumber: '',
      colorNumber: '',
      code: '',
      splitNumber: '',
      styleColor: true,
      styleColorSize: false,
      colorSize: false,
      barCodeArticleNumberEqual: true,
      principal: '',
      showOI: 'none',
      reference: ''
    }
  },
  methods: {
    search() {
      getManufacturer().then((res) => {
        console.log(res.data)
        for (let a of res.data.data) {
          if (this.no == a.no) {
            this.name = a.name
            this.nameAll = a.nameAll
            this.principal = a.principal
            this.curencyType = a.curencyType
            this.discount = a.discount
            this.phone = a.phone
            this.contact = a.contact
            this.fax = a.fax
            this.remark = a.remark
            this.address = a.address
            this.brandedCompany = a.brandedCompany
            this.$message({
              type: 'warning',
              message: '该厂商编号已存在'
            })
          }
        }
      })
    },

    closeClick() {
      return this.$emit('closeClick')
    },
    // transformation(){
    //   if(this.styleColorSize==true){
    //     this.styleColorSize=1
    //   }else if(this.styleColorSize==false){
    //     this.styleColorSize=0
    //   }
    // },
    //删除条码
    dele() {
      if (this.idList._id == undefined) {
        this.$message({
          message: '请选择要删除的条码规律',
          type: 'warning',
          offset: 400
        })
        return
      }
      let obj = { id: this.idList._id }
      console.log(obj)
      this.$confirm('是否删除此条码规律的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteBarCode(obj).then((res) => {
            // this._getColorSeason()
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })

              getBarCode().then((res) => {
                this.AllList = res.data.data
                this.companyList = []
                this.AllList.forEach((element) => {
                  this.companyList.push({
                    value: element.company,
                    _id: element.id
                  })
                })
              })
              this.brandedCompany = ''
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      // }
    },

    //操作条码建档
    preservation1() {
      if (this.brandedCompany == undefined || this.brandedCompany == '') {
        // == undefined || this.brandedCompany == ''
        // return
        if (!this.brandedCompany) {
          this.$message({
            message: '品牌公司/条码规律不能为空',
            type: 'warning',
            offset: 400
          })
          return
        }
        // let sendData = {brandedCompany:this.brandedCompany}
        let obj = {
          sizeKindId: parseInt(this.sizeKindId),
          styleNumber: parseInt(this.styleNumber),
          colorNumber: parseInt(this.colorNumber),
          code: this.code == '' ? 0 : parseInt(this.code),
          splitNumber: this.splitNumber == '' ? 0 : parseInt(this.splitNumber),
          styleColor: this.styleColor ? 1 : 0,
          styleColorSize: this.styleColorSize ? 1 : 0,
          colorSize: this.colorSize ? 1 : 0,
          barCodeArticleNumberEqual: this.barCodeArticleNumberEqual ? 1 : 0,
          partitionPrice: this.partitionPrice,
          // Company:this.Company
          company: this.brandedCompany,
          id: this.idList._id
        }
        // console.log(obj, '111111111111111111111')
        //修改条码建档
        for (const i of this.companyList) {
          if (i.value == this.brandedCompany) {
            // putBarCode(obj).then(res=>{
            //   console.log(res.data)
            // });
            //修改
            this.$confirm('此操作将修改此品牌的数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                postBarCode(obj).then((res) => {
                  console.log(res)
                  if (res.data.code == 200) {
                    this.$message({
                      type: 'success',
                      offset: 400,
                      message: '修改条码数据成功!'
                    })
                  } else {
                    this.$message.error({
                      offset: 400,
                      message: '修改失败'
                    })
                  }
                })
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  offset: 400,
                  message: '已取消修改'
                })
              })
            return
          }
        }

        postBarCode(obj).then((res) => {
          console.log(res.data)
          if (res.data.code == 200) {
            this.closeClick()
            this.$message({
              type: 'success',
              message: '保存条码数据成功'
            })
            getBarCode().then((res) => {
              this.AllList = res.data.data
              this.companyList = []
              this.AllList.forEach((element) => {
                this.companyList.push({
                  value: element.company,
                  _id: element.id
                })
              })
            })
            var sendData = {
              brandedCompany: this.brandedCompany,
              name: this.brandedCompany,
              discount: this.discount
            }
            console.log(sendData) //创建品牌公司
            postBranded(sendData).then((res) => {
              console.log(res.data)
            })

            this.brandedCompany = ''
            this.$refs.newdataFirstInp2.focus()
          } else {
            this.$message.error({
              message: '保存条码数据失败'
            })
          }
        })
      }
      //  this.getBarCode()
    },
    //保存 上半部分建档
    preservation() {
      // if(this.no == '' || this.name == '' || this.discount == '' || this.curencyType == '' || this.brandedCompany == ''){
      //   this.$alert('厂商编号，厂商简称，币种，折数或品牌公司/条码规律不能为空', '提示', {
      //     confirmButtonText: '确定',
      //   });
      //   return
      //   // console.log(111)
      // }
      //  == undefined || this.no == ''
      // if (!this.no) {
      //   this.$message({
      //     message: '厂商编号不能为空',
      //     type: 'warning',
      //     offset: 400
      //   })
      //   return
      // }
      if (!this.no) return this.$message.warning('厂商编号不能为空')
      if (!this.name) return this.$message.warning('厂商简称不能为空')
      if (!this.discount) return this.$message.warning('折数不能为空')
      if (!this.curencyType) return this.$message.warning('币种不能为空')
      if (!this.brandedCompany)
        return this.$message.warning('品牌公司/条码规律不能为空')
      // return
      // if (this.brandedCompany == undefined || this.brandedCompany == '') {
      //   this.$message({
      //     message: '品牌公司/条码规律不能为空',
      //     type: 'warning',
      //     offset: 400
      //   })
      //   return
      // }
      var obj = {
        address: this.address,
        no: this.no,
        name: this.name,
        nameAll: this.nameAll,
        contact: this.contact,
        discount: this.discount,
        phone: this.phone,
        fax: this.fax,
        remark: this.remark,
        principal: this.principal,
        curencyType: this.curencyType,
        brandedCompany: this.brandedCompany,
        id: this.id
      }
      if (this.showType == '编辑') {
        this.$confirm('是否修改此厂商编号的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          putManufacturer(JSON.stringify(obj))
            .then((res) => {
              // this._getManufacturer()
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  offset: 400,
                  message: '修改厂商数据成功!'
                })
                this.$emit('saveInfo')
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                offset: 400,
                message: '修改失败'
              })
            })
        })
        return
      }
      console.log(obj)
      postManufacturer(obj).then((res) => {
        console.log(res)
        // this.closeClick()
        this.$emit('saveInfo')
        if (res.data.code == 200) {
          if (this.showType == '新建') {
            this.$emit('addDataLen')
          }
          this.$message({
            message: '添加厂商数据成功',
            type: 'success',
            offset: 400
          })
          this.$refs.newdataFirstInp1.focus()
        } else {
          // this.$alert('添加失败，厂商编号不能为空，不能重复，条码规律不能为空', '提示', {
          //   confirmButtonText: '确定',
          // })
          this.$message.error({
            message: '添加厂商数据失败',
            offset: 400
          })
        }
      })
      this.address = ''
      this.no = ''
      this.name = ''
      this.nameAll = ''
      this.contact = ''
      this.discount = 10
      this.phone = ''
      this.fax = ''
      this.remark = ''
      this.principal = ''
      this.id = ''
    },

    // 条码规律
    querySearch(queryString, cb) {
      cb(this.companyList)
    },

    // 选择尺码
    // changeCompany(item) {
    //   console.log(item)
    // },
    handleSelect(_index) {
      // 新增
      this.idList = this.companyList[_index]
      this.brandedCompany = this.idList.value
      // console.log(this.companyList, 'this.companyList')
      // 以下原来的代码
      // this.idList = _index
      // 设置选择的那条数据
      // console.log(item, '选择的那条数据')
      // this._id = item._id
      for (const i of this.AllList) {
        if (i.id == this.idList._id) {
          this.code = i.code == '' ? 0 : i.code
          this.barCodeArticleNumberEqual =
            i.barCodeArticleNumberEqual == 1 ? true : false
          this.colorNumber = i.colorNumber
          this.colorSize = i.colorSize == 1 ? true : false
          this.company = i.company
          //  this.id = i.id
          this.isEndPrice = i.isEndPrice
          this.partitionPrice = i.partitionPrice
          this.sizeKindId = i.sizeKindId
          this.softwareCustomerId = i.softwareCustomerId
          this.splitNumber = i.splitNumber == '' ? 0 : i.splitNumber
          this.status = i.status
          this.styleColor = i.styleColor == 1 ? true : false
          this.styleColorSize = i.styleColorSize == 1 ? true : false
          this.styleNumber = i.styleNumber
          this.reference = i.reference || ''
          console.log(this.reference, '条码样式')
        }
      }
    },

    // 点击显示图片
    OIclick() {
      this.showOI = 'block'
    },
    closeOI() {
      this.showOI = 'none'
    }
  },
  components: {
    sizeList,
    OIimg
  },
  watch: {
    no(a, b) {
      if (!a) return
      let r = /^[A-Za-z]+$/
      if (a != '' || r.test(a) || a != null) {
        this.no = a.toUpperCase().trim()
      } else {
        this.$message({
          type: 'warning',
          duration: 10,
          message: '部类请输入字母'
        })
        // this.$message.error('部类请输入字母')
        return
      }
    },

    detailInfo(a, b) {
      // console.log(a.id)
      this.address = a.address
      this.no = a.no
      this.name = a.name
      this.principal = a.principal
      this.nameAll = a.nameAll
      this.contact = a.contact
      this.discount = a.discount
      this.phone = a.phone
      this.fax = a.fax
      this.remark = a.remark
      this.brandedCompany = a.brandedCompany
      this.id = a.id
    },
    brandedCompany(a, b) {
      if (a != '' && a != undefined) {
        this.brandedCompany = a && a.toUpperCase().trim()
        for (const i of this.AllList) {
          if (i.company == this.brandedCompany) {
            ;(this.code = i.code == '' ? 0 : i.code),
              (this.barCodeArticleNumberEqual =
                i.barCodeArticleNumberEqual == 1 ? true : false)
            this.colorNumber = i.colorNumber
            this.colorSize = i.colorSize == 1 ? true : false
            this.company = i.company
            this.isEndPrice = i.isEndPrice
            this.partitionPrice = i.partitionPrice
            this.sizeKindId = i.sizeKindId
            this.softwareCustomerId = i.softwareCustomerId
            this.splitNumber = i.splitNumber == '' ? 0 : i.splitNumber
            this.status = i.status
            this.styleColor = i.styleColor == 1 ? true : false
            this.styleColorSize = i.styleColorSize == 1 ? true : false
            this.styleNumber = i.styleNumber
            this.reference = i.reference || ''
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.size_list {
  position: absolute;
  right: 24px;
  top: 330px;
}
.f_button {
  position: absolute;
  bottom: 14px;
  right: 100px;
}
.f_button1 {
  position: absolute;
  bottom: 14px;
  right: 21px;
}
.explain {
  width: 296px;
  height: 33px;
  border-radius: 20px;
  background: #f8f8f8;
  font-size: 14px;
  text-align: center;
  /* padding-top: 12px; */
  margin: 40px 0 0 25px;
  display: flex;
}
.newdata.explain i {
  margin: -4px 6px 0 5px;
}
.explain p {
  margin: 6px 0 0 10px;
}
.explain a {
  text-decoration: none;
  margin-top: 6px;
}
.last_input {
  width: 34px;
  height: 17px;
  text-align: center;
  outline: none;
}
.foot_contener1 {
  margin-top: 15px;
  display: flex;
  width: 100%;
}
.sl {
  width: 96px;
  height: 29px;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 0 15px;
}
.sl:focus {
  outline: none;
  border: 1px solid #017aff;
}
.newdata {
  width: 1000px;
  height: 350px;
  // height: 750px;
  background-color: white;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 9%;
  z-index: 999;
}

/* 头部 */
.topbar {
  width: 100%;
  height: 48px;
  background-color: #f8f8f8;
}
.new {
  float: left;
  line-height: 48px;
  margin-left: 25px;
  font-weight: 800;
}
.new1 {
  width: 16px;
  height: 16px;
  background: #017aff;
  margin-top: 15px;
  border-radius: 50%;
}
.new1 p {
  height: 16px;
}
.closeClick {
  float: right;
  text-align: center;
  padding-top: 12px;
  width: 48px;
  height: 37px;
}
.center_box {
  width: 1000px;
  height: 60px;
  /* border-bottom: 1px dashed #dbdbdb; */
}

// 新增
.new_center {
  display: flex;
  justify-content: space-around;
  .list_cenent {
    flex: 1;
    height: 50px;
    line-height: 30px;
    margin-left: 30px;
    .hint {
      color: red;
    }
    .info {
      margin-left: 10px;
    }
  }
}
.center_box1 {
  width: 100%;
  height: 45px;
  margin-top: 25px;
  display: flex;
}
.center_box2 {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: flex-end;
  margin-right: 24px;
}
.center_box1c {
  display: flex;
}
.contener {
  color: red;
  padding: 6px 0 0 13px;
  margin-right: 33px;
}
.contener1 {
  padding: 4px 5px 0 3px;
}
.center_box3 {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: flex-end;
}

.new_barcode {
  display: flex;
  margin-left: 22px;
  .barcode_item_2 {
    padding-left: 20px;
  }
}
.button_1 {
  position: relative;
  top: 30px;
  left: 885px;
}

.foot {
  width: 100%;
  height: 478px;
  position: relative;
}
.foot_1 {
  width: 67%;
  height: 80px;
  margin-top: 10px;
}
.foot_3 {
  width: 67%;
  height: 160px;
  margin-top: 10px;
}
.foot_input {
  width: 100%;
  height: 40px;
  margin-top: 16px;
  display: flex;
}
.contener2 {
  margin: 6px 8px 0 26px;
}
.contener3 {
  margin: 6px 8px 0 66px;
}
.contener4 {
  margin: 6px 8px 0 10px;
}
.contener5 {
  margin: 0 24px 0 26px;
}
.contener6 {
  margin: 0 24px 0 86px;
}
.contener7 {
  margin: 0 58px 0 86px;
}

.jl {
  margin-left: 8px;
}
.jl1 {
  margin-right: 15px;
}
.jl2 {
  margin-right: 2px;
}
.jl3 {
  margin-right: 28px;
}
.jl4 {
  margin-right: 45px;
}
.jl5 {
  position: relative;
  bottom: 5px;
  left: 6px;
}
.select {
  width: 160px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
}
</style>

<style>
.newdata .el-input__inner {
  width: 160px;
  height: 32px;
  padding-left: 10px;
}
.newdata .el-input {
  width: 160px;
}

.newdata .el-icon-question:before {
  color: #017aff;
  position: relative;
  left: 10px;
  top: 11px;
}

.newdata .el-input__icon {
  line-height: 30px;
}
.newdata .explain .el-icon-question {
  line-height: 10px;
  margin-right: 5px;
}

.newdata .center_box3 .jl1 .el-input__inner {
  width: 402px;
}

.newdata .my-autocomplete li {
  line-height: normal;
  padding: 7px;
}
.newdata .my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.newdata .my-autocomplete li .addr {
  font-size: 12px;
  color: #b4b4b4;
}

.newdata .my-autocomplete li .highlighted .addr {
  color: #ddd;
}
</style>
